<template>
	<view class="content">
		<u-navbar title="安妮详情" placeholder='true' autoBack='true'></u-navbar>
		<!-- 商品轮播图 -->
		<view class="banner-wrapper">
			<swiper class="banner" @change="bannerChange">
				<swiper-item class="item" v-for="(item, index) in goodInfo" :key="index" @click="onBanner(index)">
					<image class="img" :src="item.mainImgUrl" mode="aspectFill"></image>
					<view class="video-bg" @click.stop="onVideo"><text class="iconfont icon-bofang"></text></view>
				</swiper-item>
			</swiper>
			<view class="num" v-if="goodInfo.imgUrlList">{{ bannerIndex }} /
				{{ goodInfo.videoUrl ? goodInfo.imgUrlList.length + 1 : goodInfo.imgUrlList.length }}
			</view>
		</view>
		<!-- 商品价格跟销量介绍 -->
		<view class="goods-item">
			<view class="goods-price">
				<view class="price">
					<view class="new-price">18岁</view>
					<view class="old-price">162cm</view>
				</view>
				<view class="Sold">北京朝阳</view>
			</view>
			<view class="title ">
				“我比较在意感情里的真诚，有问题不喜欢冷战～
				如果你遇到不开心的事，直接和我说会更让我有安全感。”“我没有特别死板的标准，但相处起来舒服很重要——比如能好好沟通，遇到问题愿意一起解决，对生活有点热情(骗子绕行)
			</view>
			<view class="like" @click="showlike">
				<u-icon name="thumb-up" size="28" v-if="!like"></u-icon>
				<u-icon name="thumb-up-fill" color="#fa3534" size="28" v-if="like"></u-icon>
			</view>
			<view class="black" @click="showblack">
				<u-icon name="thumb-down" size="28"></u-icon>
			</view>
		</view>
		<!-- 商品规格展示 -->
		<view class="goods-Spec">
			<view class="Spec-item">
				<view class="title">
					基本情况
					<text class="title-text">汉族/18岁162cm/所在地北京朝阳</text>
				</view>
				<view class="right-item">></view>
			</view>
			<view class="Spec-item">
				<view class="title">
					经济情况
					<text class="title-text">10000~20000元</text>
				</view>
				<view class="right-item">></view>
			</view>
			<view class="Spec-item">
				<view class="title">
					学历工作
					<text class="title-text">本科/医美/保健</text>
				</view>
				<view class="right-item">></view>
			</view>
			<view class="Spec-item">
				<view class="title">
					婚姻状态
					<text class="title-text">离异/孩子跟着对方</text>
				</view>
				<view class="right-item">></view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods-marr">
			<view class="title"><text class="text">择偶条件</text></view>
			<view class="goods-marr-text">
				44-57岁 130-260cm 北京 学历:不限 婚姻状况:不限
			</view>
		</view>
		<view class="goods-marr">
			<view class="title"><text class="text">个人独白</text></view>
			<view class="goods-marr-text">
				“我比较在意感情里的真诚，有问题不喜欢冷战～
				如果你遇到不开心的事，直接和我说会更让我有安全感。”“我没有特别死板的标准，但相处起来舒服很重要——比如能好好沟通，遇到问题愿意一起解决，对生活有点热情(骗子绕行)
			</view>
		</view>
		<view class="" style="height: 150rpx; width: 1rpx;">

		</view>
		<!-- <view class="detail-wrapper"><u-parse :html="goodInfo[0].detailImgUrl"></u-parse></view> -->
		<!-- 底部购买 -->
		<view class="bottom-button">
			<view class="bottom-left">
				<!-- 	<view class="button-left" @click="onhome">
					<image src="../../static/imgs/sy.png" class="img"></image>
					<text class="button-text">首页</text>
				</view> -->
				<!-- <view class="button-left" @click="oncart">
					<image src="../../static/imgs/gw.png" class="img"></image>
					<text class="button-text">购物车</text>
				</view> -->
			</view>
			<view class="bottom-right">
				<button class="button-left" @click="onaddcart">加入关注</button>
				<button class="button-right" @click="ongoods">立即私信</button>
			</view>
		</view>
		<u-modal :show="show2" :title="title" showCancelButton='true' @confirm='onadd' @cancel='onadd'>
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>

		<!-- 弹窗 -->
		<popup ref="Popup"></popup>
		<!-- 点击播放视频 -->
		<video-player ref="player"
			src="https://static-fahyapp.jiayuan.com/app/fateship/1e/3e/1e63660b6f2581b4ce238f30108ce53e/250718/29cfd317469712ee.mp4"></video-player>
	</view>
</template>

<script>
	import Popup from './components/popup.vue';
	import VideoPlayer from '@/components/video-player/index.vue';
	import {
		mapGetters
	} from 'vuex';
	export default {
		components: {
			Popup,
			VideoPlayer
		},
		data() {
			return {
				show: false, //提示安装qq模态框状态
				show2: false, //提示安装qq模态框状态
				title: '黑名单',
				content: `是否加入黑名单，不在看她，不再接收消息。`,

				list1: [
					"https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207684829o.jpg!o",
					"https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207679876o.jpg!o",
					"https://static-fahyapp.jiayuan.com/fateship/1e/3e/63660b6f2581b4ce238f30108ce5/pic/1752565530_97027174.jpg",
				],
				goodInfo: [{
						mainImgUrl: 'https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207679876o.jpg!o',
						imgUrlList: [
							'https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207679876o.jpg!o',
							'https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207684829o.jpg!o',
							'https://static-fahyapp.jiayuan.com/fateship/1e/3e/63660b6f2581b4ce238f30108ce5/pic/1752565530_97027174.jpg',
						],
						videoUrl: 'https://static-fahyapp.jiayuan.com/app/fateship/1e/3e/1e63660b6f2581b4ce238f30108ce53e/250718/29cfd317469712ee.mp4',
						detailImgUrl: '"<p><img src="https://peonyoss.longchimudan.com/peony/goods/87dc8fdf9e5242ecb9bbb7395511f087.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/d982ce6553c44bca971d2f3d9af31d74.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/4bbb492a35ec4786b43a2cc8895b75b0.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/3df045c45218417cb8e9859ea2869173.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/4cfd541ebd99469286166c87abadf247.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/cf7029b3942343538c0a7790f71cdbbf.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/b7ffaca371b64529b9a38b3e6357e463.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/2eb82ba02d0f41e38c5548cdd448438b.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/95c756620841455fbcb02b327d37daf7.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/20a310d86e144ab6b59da56f47b9fe16.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/47909423d2a54325abc6539ef753c8ab.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/a1bd899cb1f14845a85333c70b31b05d.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/8007f8f3fa0b4325bd17b2c4fc29b5af.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/91507c83d7094d0ca9ecc4509deff3d0.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/9f36713d2e974606bb29acb088d94adb.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/78a8958badb14ce698004780414a96af.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/7e93d171eed143369253a452adb8d267.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/8e805a0bcdb14639aa7805c9d1880b1d.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/cabfb99c56a740c1af644a365793db19.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/eb5a4e803916418eae43bedd2c8156ce.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/c7fd83b8e3c1447183ee487e988afd3b.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/4aa8ebea01d04b6caa6dd146e89aeb72.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/37bcbd21bc8e40e5afbe082878ff9152.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/8ea0e3a07ef94896a6b357c3e5f1e66f.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/9ffb70bfe1824cea9802bc829f843dac.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/c8ec5e748d4d4a6c874352e24932834c.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/b3a538c953ac43bda56069f93b19802b.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/03209b7b97cd401584320a70ee67dca4.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/1775dd594ed1487691564b91fdd55900.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/9d571d8650214f3db6d3912f3964095a.jpg"><img src="https://peonyoss.longchimudan.com/peony/goods/942e2ccc323c4273b7d6d7e9cb318790.jpg"></p>"'
					},
					{
						mainImgUrl: 'https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207684829o.jpg!o',
						imgUrlList: [
							'https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207679876o.jpg!o',
							'https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207684829o.jpg!o',
							'https://static-fahyapp.jiayuan.com/fateship/1e/3e/63660b6f2581b4ce238f30108ce5/pic/1752565530_97027174.jpg',
						],
						videoUrl: 'https://static-fahyapp.jiayuan.com/app/fateship/1e/3e/1e63660b6f2581b4ce238f30108ce53e/250718/29cfd317469712ee.mp4',
					},
					{
						mainImgUrl: 'https://static-fahyapp.jiayuan.com/fateship/1e/3e/63660b6f2581b4ce238f30108ce5/pic/1752565530_97027174.jpg',
						imgUrlList: [
							'https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207679876o.jpg!o',
							'https://t2.jyimg.com/1e/3e/63660b6f2581b4ce238f30108ce5/207684829o.jpg!o',
							'https://static-fahyapp.jiayuan.com/fateship/1e/3e/63660b6f2581b4ce238f30108ce5/pic/1752565530_97027174.jpg',
						],
						videoUrl: 'https://static-fahyapp.jiayuan.com/app/fateship/1e/3e/1e63660b6f2581b4ce238f30108ce53e/250718/29cfd317469712ee.mp4',
					}
				],
				like: false,
			};
		},
		methods: {
			ongoods(item) {
				uni.navigateTo({
					url: '/pages/message-detail/index'
				});
			},
			onadd() {
				this.show2 = false
			},
			showblack() {
				console.log('加入黑名单')
				this.show2 = true
			},
			showlike() {
				this.like = !this.like
			},
			// 播放视频
			onVideo() {
				this.$refs['player'].show();
			},
			//轮播图滚动
			bannerChange(e) {
				console.log(e);
			},
			//查看轮播图
			onBanner(current) {
				let arr = this.goodInfo.imgUrlList.map(v => {
					return this.imgBaseUrl + v;
				});
				uni.previewImage({
					urls: arr,
					current: current
				});
			},
			//跳转首页
			onhome() {
				uni.switchTab({
					url: '/pages/index/index'
				});

				console.log('跳转首页');
			},
			//跳转购物车
			oncart() {
				uni.switchTab({
					url: '/pages/cart/index'
				});
				console.log('去购物车');
			},
			onaddcart() {
				uni.switchTab({
					url: '/pages/cart/index'
				});
				console.log('加入购物车');
			},
			onpayment() {
				uni.redirectTo({
					url: '/pages/message-list/index'
				})
				console.log('支付订单');
			}
		}
	};
</script>

<style lang="scss">
	@import '@/styles/mixin.scss';

	.content {
		min-height: 100%;
		background-color: #f5f5f5;

		.banner-wrapper {
			position: relative;
			height: 760rpx;

			.banner {
				height: 100%;
				background-color: #f5f5f5;
			}

			.item {
				position: relative;

				.video-bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: rgba(0, 0, 0, 0.4);
				}

				.iconfont {
					color: #ffffff;
					font-size: 82rpx;
				}
			}

			.img {
				width: 100%;
				height: 100%;
			}

			.num {
				font-size: 20rpx;
				width: 70rpx;
				height: 35rpx;
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				color: #fff;
				text-align: center;
				padding: 5rpx 0;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.share {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 50%;
				text-align: center;

				&:active {
					opacity: 0.7;
				}

				.iconfont {
					color: #f1f1f1;
				}
			}
		}

		.goods-item {
			padding: 10rpx;
			border-radius: 20rpx;
			margin: 20rpx;
			background-color: #ffffff;
			position: relative;

			.like {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}

			.black {
				position: absolute;
				right: 100rpx;
				bottom: 20rpx;
			}

			.goods-price {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: baseline;

				.price {
					display: flex;
					flex-direction: row;
					align-items: baseline;
					padding: 10rpx;

					.new-price {
						font-size: 36rpx;
						font-weight: 500;
					}

					.old-price {
						padding-left: 20rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #cccccc;
					}
				}

				.Sold {
					font-size: 24rpx;
					font-weight: 400;
					color: #888888;
					padding-right: 20rpx;
				}
			}

			.title {
				width: 480rpx;
				margin: 10rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}
		}

		.goods-Spec {
			padding: 10rpx;
			margin: 10rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.Spec-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: baseline;
				border-bottom: 1rpx solid #eeeeee;
				padding: 10rpx;

				.title {
					font-size: 26rpx;
					font-weight: 400;
					color: #222222;
				}

				.title-text {
					padding-left: 20rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #888888;
				}

				.right-item {
					color: #cccccc;
				}
			}
		}

		.goods-marr {
			padding: 10rpx;
			margin: 10rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.title {
				margin: 20rpx;
				font-weight: bold;
				text-align: center;
			}

			.goods-marr-text {
				padding: 20rpx;
			}
		}

		.title {
			margin: 20rpx;
			font-weight: bold;
			text-align: center;

			.text {
				font-size: 26rpx;
				color: #222222;
			}
		}

		.detail-wrapper {

			image,
			img {
				display: block;
				max-width: 100%;
			}
		}

		.bottom-button {
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			padding: 10rpx;
			background: #ffffff;

			.bottom-left {
				padding: 15rpx;
				display: flex;

				.button-left {
					width: 85rpx;
					height: 86rpx;
					flex-direction: column;
					display: flex;

					.img {
						width: 40rpx;
						height: 42rpx;
					}

					.button-text {
						font-size: 20rpx;
						font-weight: 400;
						color: #222222;
					}
				}
			}

			.bottom-right {
				display: flex;

				.button-left {
					height: 78rpx;
					width: 240rpx;
					background: #f5b539;

					font-weight: bold;
					font-size: 28rpx;
					color: #f2f2f2;
					border-radius: 39rpx 0 0 39rpx;
				}

				.button-right {
					font-weight: bold;
					font-size: 28rpx;
					color: #f2f2f2;
					border-radius: 0 39rpx 39rpx 0;
					height: 78rpx;
					width: 240rpx;
					background: #f53942;
				}
			}
		}
	}
</style>